<link rel="stylesheet" href="../../components/customs/image-info-list/index.less">
<template>
  <div class="security-route-left">
    <group-title />
  </div>
  <div class="security-route-middle" />
  <div class="security-route-right">
    <category-title title="轨迹画面捕捉" title-sub="Track screen capture" filter />
    <div class="image-info-box">
      <image-info-list :datas="smartObject.msrList" type="route" @preview="onPreviewImage"/>
    </div>
  </div>
  <preview v-if="showPreview" :url="previewUrl" @close="showPreview = false"/>
</template>

<script setup>
import { imageList } from "./data.js";

import GroupTitle from "@/components/customs/group-title/index.vue";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import ImageInfoList from "@/components/customs/image-info-list/index.vue";
import {inject} from "@vue/runtime-core";
import {CameraVideo} from "@/common/customs/security";
import {ref} from "vue";
import Preview from "@/components/customs/preview/index.vue";

const smartObject = inject("smartObject")
const showPreview = ref(false);
const previewUrl = ref("");
const onPreviewImage =(item) => {
  previewUrl.value = item.image;
  showPreview.value = true;
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
